To convert a string into camel case without using any library in Vue.js, you can use the following algorithm:
- Split the input string into an array of words using a delimiter such as space or underscore.
- Convert the first word to lowercase and capitalize the first letter of each subsequent word.
- Join the words together without any delimiter.
In this tutorial we will learn how to Convert Any String into Camel Case String Using Vue Js and Native javascript Method.
How to Convert String into Camel Case String in Vue Js?
- The code defines a computed property called
toCamelCase. - The computed property is a function that takes no arguments.
- The function uses a regular expression to split the
strstring into words and to match the first character of each word and any uppercase letters. - The function uses a callback function to transform each matched word. If the word is the first one (index 0), the callback function returns the word as lowercase. Otherwise, it returns the word as uppercase.
- The function then replaces any whitespace in the resulting string with an empty string.
- The resulting string is returned as Camel Case String.
Vue Js Convert String into Camel Case Example
<div id="app">
<p>String: {{str}} </p>
<p >Camel Case String: {{ toCamelCase}}</p>
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
str: 'my camel case string'
}
},
computed: {
toCamelCase() {
return this.str.replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
return index === 0 ? word.toLowerCase() : word.toUpperCase();
}).replace(/\s+/g, '');
}
}
});
app.mount('#app');
</script>
Output of above example
